import React, { useRef } from 'react';
import {SparklesIcon, UserCircleIcon} from "@heroicons/react/24/outline";
import MarkdownBlock from './MarkdownBlock';
import CopyButton, {CopyButtonMode} from "./CopyButton";
import {ChatMessage, MessageType} from "../models/ChatCompletion";
import UserContentBlock from "./UserContentBlock";

interface Props {
  block: ChatMessage;
  loading: boolean;
  isLastBlock: boolean;
}

const ChatBlock: React.FC<Props> = ({block, loading, isLastBlock}) => {
  const contentRef = useRef<HTMLDivElement>(null);

  const errorStyles = block.messageType === MessageType.Error ? {
    backgroundColor: '#F5E6E6',
    borderColor: 'red',
    borderWidth: '1px',
    borderRadius: '8px',
    padding: '10px'
  } : {};

  if(block.role == 'user'){
    return (
      <div key={`chat-block-${block.id}`} className={`group  w-full text-gray-800 dark:text-gray-100 border-b border-black/10 dark:border-gray-900/50 bg-white dark:bg-gray-850 message-right`}>
        <div className="text-base md:max-w-2xl lg:max-w-3xl xl:max-w-4xl 2xl:max-w-5xl 3xl:max-w-6xl 4xl:max-w7xl p-2 flex lg:px-0 m-auto flex-col" style={{alignItems:"end"}}>
          <div className="w-full flex" style={{ maxWidth:"calc(100% - 60px)", width: "max-content", alignItems:"center", justifyContent: "end"}}>
            <div className="flex" style={{ marginRight:20, minHeight: 60, justifyContent:"center", alignItems:"center"}}>
              <div id={`message-block-${block.id}`} className="flex flex-grow flex-col gap-3" style={errorStyles}>
                <div className="min-h-[40px] flex flex-col items-start gap-4">
                  <div ref={contentRef} className="markdown prose w-full break-words dark:prose-invert light">
                    <UserContentBlock text={block.content} fileDataRef={(block.fileDataRef) ? block.fileDataRef : []}/>
                  </div>
                </div>
              </div>
            </div>
            <div className="w-[30px] flex flex-col relative items-end mr-4">
              <div className="relative flex h-[30px] w-[30px] p-0 rounded-sm items-center justify-center">
                <UserCircleIcon width={24} height={24}/>
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }

  return (
      <div key={`chat-block-${block.id}`} className={`group  w-full text-gray-800 dark:text-gray-100 border-b border-black/10 dark:border-gray-900/50 bg-custom-gray dark:bg-gray-900 message-left`}>
        <div className="text-base md:max-w-2xl lg:max-w-3xl xl:max-w-4xl 2xl:max-w-5xl 3xl:max-w-6xl 4xl:max-w7xl p-2 flex lg:px-0 m-auto flex-col">
          <div className="w-full flex">
            <div className="w-[30px] flex flex-col relative items-end mr-4">
              <div className="relative flex h-[30px] w-[30px] p-0 rounded-sm items-center justify-center">
                <SparklesIcon key={`open-ai-logo-${block.id}`}/>
              </div>
            </div>
            <div className="relative flex w-[calc(100%-50px)] flex-col gap-1 md:gap-3 lg:w-full">
              <div id={`message-block-${block.id}`} className="flex flex-grow flex-col gap-3" style={errorStyles}>
                <div className="min-h-[20px] flex flex-col items-start gap-4">
                  <div ref={contentRef} className="markdown prose w-full break-words dark:prose-invert light">
                    <MarkdownBlock markdown={block.content} role={block.role} loading={loading}/>
                  </div>
                </div>
              </div>
            </div>
          </div>
          {!(isLastBlock && loading) && (
              <div id={`action-block-${block.id}`} className="flex justify-start items-center ml-10">
                <div className="copy-button">
                  <CopyButton mode={CopyButtonMode.Compact} text={block.content}/>
                </div>
              </div>
          )}
        </div>
      </div>
  );
};

export default ChatBlock;
